<template>
  <view class="purchase-detail-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <text class="page-title">{{ recptCode }}</text>
    </view>

    <!-- 行信息展示 -->
    <view class="line-info-section" v-if="lineInfo">
      <view class="info-header">
        <text class="info-title">物料信息</text>
        <view class="line-status" :class="getLineStatusClass()">
          {{ getLineStatusText() }}
        </view>
      </view>
      
      <view class="info-content">
        <view class="content-grid">
          <view class="grid-item">
            <text class="item-label">物料编码</text>
            <text class="item-value">{{ lineInfo.itemCode }}</text>
          </view>
          <view class="grid-item">
            <text class="item-label">物料名称</text>
            <text class="item-value">{{ lineInfo.itemName }}</text>
          </view>
          <view class="grid-item full-width">
            <text class="item-label">规格型号</text>
            <text class="item-value">{{ lineInfo.specification }}</text>
          </view>
          <view class="grid-item">
            <text class="item-label">单位</text>
            <text class="item-value">{{ lineInfo.unitName || '' }}</text>
          </view>
            <view class="grid-item">
              <text class="item-label">入库数量</text>
              <text class="item-value">{{ getActualReceivedQuantity() }}/{{ lineInfo.quantityRecived }}</text>
            </view>
          <view class="grid-item progress-item">
            <text class="item-label">入库进度</text>
            <view class="progress-info">
              <view class="progress-bar">
                <view 
                  class="progress-fill" 
                  :style="{ width: getProgressWidth() + '%' }"
                ></view>
              </view>
              <text class="progress-text">{{ Math.round(getProgressWidth()) }}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 添加入库按钮 -->
    <view class="add-recpt-section" v-if="lineInfo && optType === 'edit'">
      <button 
        class="add-recpt-btn" 
        @click="showRecptModal"
        :disabled="!canAddRecpt"
        :class="{ 'disabled': !canAddRecpt }"
      >
        <uni-icons type="plusempty" size="18" :color="canAddRecpt ? '#fff' : '#ccc'"></uni-icons>
        <text class="btn-text">添加入库明细</text>
      </button>
    </view>

    <!-- 入库明细列表 -->
    <view class="details-section" v-if="recptDetails.length > 0">
      <view class="section-header">
        <text class="section-title">入库明细列表</text>
        <text class="section-count">共 {{ recptDetails.length }} 条</text>
      </view>
      
      <view class="details-list">
        <view 
          class="detail-item" 
          v-for="(detail, index) in recptDetails" 
          :key="detail.detailId"
        >
          <view class="item-header">
            <view class="item-title">
              <text class="item-number">#{{ index + 1 }}</text>
            </view>
            <view class="item-actions" v-if="optType === 'edit'">
              <button class="action-btn edit-btn" @click="editDetail(detail)">
                <uni-icons type="compose" size="12" color="#007AFF"></uni-icons>
                <text>编辑</text>
              </button>
              <button class="action-btn delete-btn" @click="deleteDetail(detail)">
                <uni-icons type="trash" size="12" color="#ff4757"></uni-icons>
                <text>删除</text>
              </button>
            </view>
          </view>
          
          <view class="item-content">
            <!-- 仓库信息 -->
            <view class="content-row warehouse-info">
              <text class="row-label">入库仓库</text>
              <text class="row-value">{{ detail.warehouseName }}</text>
            </view>
            <view class="content-row">
              <text class="row-label">库区</text>
              <text class="row-value">{{ detail.locationName }}</text>
            </view>
            <view class="content-row">
              <text class="row-label">库位</text>
              <text class="row-value">{{ detail.areaCode }}</text>
            </view>
            <view class="content-row">
              <text class="row-label">入库数量</text>
              <text class="row-value">{{ detail.quantity }} {{ lineInfo.unitName || '' }}</text>
            </view>
            <view class="content-row" v-if="detail.batchCode">
              <text class="row-label">批次号</text>
              <text class="row-value">{{ detail.batchCode }}</text>
            </view>
            <view class="content-row" v-if="detail.produceDate">
              <text class="row-label">生产日期</text>
              <text class="row-value">{{ detail.produceDate }}</text>
            </view>
            <view class="content-row" v-if="detail.expireDate">
              <text class="row-label">有效期至</text>
              <text class="row-value">{{ detail.expireDate }}</text>
            </view>
            <view class="content-row" v-if="detail.sn">
              <text class="row-label">SN</text>
              <text class="row-value">{{ detail.sn }}</text>
            </view>
          </view>
          
        </view>
      </view>
    </view>

    <!-- 空状态提示 -->
    <view class="empty-state" v-if="recptDetails.length === 0">
      <uni-icons type="info-filled" size="60" color="#ccc"></uni-icons>
      <text class="empty-text">暂无入库明细</text>
      <text class="empty-desc">点击"添加入库明细"开始入库操作</text>
    </view>

    <!-- 入库明细弹窗 -->
    <uni-popup ref="recptModal" type="bottom" :safe-area="false">
      <view class="recpt-modal">
        <view class="modal-header">
          <text class="modal-title">{{ recptForm.detailId ? '编辑入库明细' : '添加入库明细' }}</text>
          <uni-icons type="close" size="20" color="#999" @click="closeRecptModal"></uni-icons>
        </view>
        
        <view class="modal-content">
          <view class="form-row">
            <view class="form-group full-width">
              <text class="form-label">入库仓库 <text class="required">*</text></text>
              <warehouse 
                ref="warehouseComponent"
                :warehouse-display-mode="warehouseDisplayMode"
                :location-display-mode="locationDisplayMode"
                :area-display-mode="areaDisplayMode"
                :default-selection="warehouseDefaultSelection"
                @selected="onWarehouseSelected"
              />
            </view>
          </view>
          
          <view class="form-row">
            <view class="form-group half-width">
              <text class="form-label">数量 <text class="required">*</text></text>
              <view class="quantity-input">
                <button class="quantity-btn" @click="decreaseQuantity">-</button>
                <input 
                  class="quantity-input-field" 
                  v-model="recptForm.quantity" 
                  type="number"
                  placeholder="0"
                />
                <button class="quantity-btn" @click="increaseQuantity">+</button>
              </view>
            </view>
            <view class="form-group half-width">
              <text class="form-label">批次号</text>
              <view class="input-wrapper">
                <input 
                  class="form-input" 
                  v-model="recptForm.batchCode" 
                  placeholder="批次号"
                />
                <view class="scan-btn">
                  <uni-icons type="scan" size="16" color="#007AFF"></uni-icons>
                </view>
              </view>
            </view>
          </view>
          
          <view class="form-row">
            <view class="form-group half-width">
              <text class="form-label">生产日期</text>
              <uni-datetime-picker 
                type="date" 
                v-model="recptForm.produceDate"
                placeholder="请选择生产日期"
                :clear-icon="false"
              ></uni-datetime-picker>
            </view>
            <view class="form-group half-width">
              <text class="form-label">有效期至</text>
              <uni-datetime-picker 
                type="date" 
                v-model="recptForm.expireDate"
                placeholder="请选择有效期"
                :clear-icon="false"
              ></uni-datetime-picker>
            </view>
          </view>
          
          <view class="form-row">
            <view class="form-group half-width">
              <text class="form-label">SN</text>
              <view class="input-wrapper">
                <input 
                  class="form-input" 
                  v-model="recptForm.sn" 
                  placeholder="SN"
                />
                <view class="scan-btn">
                  <uni-icons type="scan" size="16" color="#007AFF"></uni-icons>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="modal-btn cancel-btn" @click="closeRecptModal">取消</button>
          <button class="modal-btn confirm-btn" @click="saveRecptDetail">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getItemRecptDetail, addItemreceptdetail, updateItemreceptdetail, delItemreceptdetail } from '@/api/wm/itemrecpt.js'
import warehouse from '@/pages/app/inbound/common/warehouse/warehouse.vue'

export default {
  name: 'PurchaseDetail',
  components: {
    warehouse
  },
  data() {
    return {
      recptId: '',
      recptCode: '',
      lineId: '',
      optType: 'view', // 操作类型：edit-编辑模式，view-查看模式
      lineInfo: null,
      recptDetails: [],
      recptForm: {
        // 主表信息
        recptId: '',
        // 行表信息
        lineId: '',
        // 物料信息
        itemId: '',
        itemCode: '',
        itemName: '',
        specification: '',
        unitOfMeasure: '',
        unitName: '',
        // 明细信息
        detailId: '',
        quantity: '',
        // 仓库信息
        warehouseId: '',
        warehouseCode: '',
        warehouseName: '',
        locationId: '',
        locationCode: '',
        locationName: '',
        areaId: '',
        areaCode: '',
        areaName: '',
        // 其他字段
        batchCode: '',
        sn: '',
        produceDate: '',
        expireDate: ''
      },
      // warehouse组件相关属性
      warehouseDisplayMode: 'name',
      locationDisplayMode: 'name', 
      areaDisplayMode: 'code',
      // 仓库默认选择数据
      warehouseDefaultSelection: null
    }
  },
  
  computed: {
    canAddRecpt() {
      // 只有在编辑模式下且有待入库数量时才能添加明细
      return this.optType === 'edit' && this.lineInfo && this.getPendingQuantity() > 0
    }
  },
  
  onLoad(options) {
    this.recptId = options.recptId || ''
    this.recptCode = options.recptCode || ''
    this.lineId = options.lineId || ''
    this.optType = options.optType || 'view' // 默认为查看模式
    this.loadLineData()
  },
  
  methods: {
    // 精确计算工具函数
    // 将数字转换为整数进行计算，避免浮点数精度丢失
    toFixedNumber(num, precision = 2) {
      const factor = Math.pow(10, precision)
      return Math.round(num * factor) / factor
    },
    
    // 精确加法
    preciseAdd(a, b) {
      const aNum = parseFloat(a) || 0
      const bNum = parseFloat(b) || 0
      return this.toFixedNumber(aNum + bNum)
    },
    
    // 精确减法
    preciseSubtract(a, b) {
      const aNum = parseFloat(a) || 0
      const bNum = parseFloat(b) || 0
      return this.toFixedNumber(aNum - bNum)
    },
    
    // 精确乘法
    preciseMultiply(a, b) {
      const aNum = parseFloat(a) || 0
      const bNum = parseFloat(b) || 0
      return this.toFixedNumber(aNum * bNum)
    },
    
    // 精确除法
    preciseDivide(a, b) {
      const aNum = parseFloat(a) || 0
      const bNum = parseFloat(b) || 0
      if (bNum === 0) return 0
      return this.toFixedNumber(aNum / bNum)
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 加载行数据
    loadLineData() {
      if (!this.lineId) {
        uni.showToast({
          title: '缺少行ID参数',
          icon: 'none'
        })
        return Promise.reject('缺少行ID参数')
      }
      
      uni.showLoading({ title: '加载中...' })
      
      return getItemRecptDetail(this.lineId).then(response => {
        const data = response.data
        
        // 设置行信息
        this.lineInfo = data.recptLine
        
        // 设置入库明细
        this.recptDetails = data.recptDetails || []
        
        uni.hideLoading()
      }).catch(error => {
        uni.hideLoading()
        console.error('加载行数据失败:', error)
        
        // 检查是否是业务错误（code=500）
        if (error === '500') {
          // 拦截器已经显示了具体的业务错误信息，这里不需要再显示
          console.log('业务错误，拦截器已显示toast')
        } else {
          // 真正的网络异常
          uni.showToast({ 
            title: '网络异常，请检查网络连接后重试', 
            icon: 'none',
            duration: 3000
          })
        }
        
        // 数据加载失败时不清空现有数据，保持页面可用性
        // this.lineInfo = null
        // this.recptDetails = []
        
        // 抛出错误以便调用方处理
        throw error
      })
    },
    
    // 显示入库弹窗
    showRecptModal() {
      // 检查数据是否已加载
      if (!this.lineInfo) {
        uni.showToast({
          title: '数据加载中，请稍后再试',
          icon: 'none'
        })
        return
      }
      
      if (!this.canAddRecpt) {
        uni.showToast({
          title: '该行已完全入库',
          icon: 'none'
        })
        return
      }
      
      this.resetRecptForm()
      this.$refs.recptModal.open()
    },
    
    // 关闭入库弹窗
    closeRecptModal() {
      this.$refs.recptModal.close()
    },
    
    // 重置表单
    resetRecptForm() {
      this.recptForm = {
        // 主表信息
        recptId: this.recptId,
        // 行表信息
        lineId: this.lineId,
        // 物料信息
        itemId: this.lineInfo ? this.lineInfo.itemId : '',
        itemCode: this.lineInfo ? this.lineInfo.itemCode : '',
        itemName: this.lineInfo ? this.lineInfo.itemName : '',
        specification: this.lineInfo ? this.lineInfo.specification : '',
        unitOfMeasure: this.lineInfo ? this.lineInfo.unitOfMeasure : '',
        unitName: this.lineInfo ? this.lineInfo.unitName : '',
        // 明细信息
        detailId: '',
        quantity: '',
        // 仓库信息
        warehouseId: '',
        warehouseCode: '',
        warehouseName: '',
        locationId: '',
        locationCode: '',
        locationName: '',
        areaId: '',
        areaCode: '',
        areaName: '',
        // 其他字段
        batchCode: '',
        sn: '',
        produceDate: '',
        expireDate: ''
      }
      
      // 清空仓库默认选择
      this.warehouseDefaultSelection = null
    },
    
    
    // 增加数量
    increaseQuantity() {
      const current = parseFloat(this.recptForm.quantity) || 0
      this.recptForm.quantity = this.preciseAdd(current, 1).toString()
    },
    
    // 减少数量
    decreaseQuantity() {
      const current = parseFloat(this.recptForm.quantity) || 0
      if (current > 0) {
        this.recptForm.quantity = this.preciseSubtract(current, 1).toString()
      }
    },
    
    // 仓库选择事件
    onWarehouseSelected(selectedData) {
      this.recptForm.warehouseId = selectedData.warehouseId
      this.recptForm.warehouseCode = selectedData.warehouseCode
      this.recptForm.warehouseName = selectedData.warehouseName
      this.recptForm.locationId = selectedData.locationId
      this.recptForm.locationCode = selectedData.locationCode
      this.recptForm.locationName = selectedData.locationName
      this.recptForm.areaId = selectedData.areaId
      this.recptForm.areaCode = selectedData.areaCode
      this.recptForm.areaName = selectedData.areaName
    },
    
    // 保存入库明细
    saveRecptDetail() {
      // 验证数量
      if (!this.recptForm.quantity || parseFloat(this.recptForm.quantity) <= 0) {
        uni.showToast({
          title: '请输入有效的入库数量',
          icon: 'none'
        })
        return
      }
      
      const inputQuantity = parseFloat(this.recptForm.quantity)
      
      // 修改时的数量验证逻辑
      if (this.recptForm.detailId) {
        // 修改时：需要找到当前明细的原始数量
        const currentDetail = this.recptDetails.find(detail => detail.detailId === this.recptForm.detailId)
        if (!currentDetail) {
          uni.showToast({
            title: '找不到当前明细信息',
            icon: 'none'
          })
          return
        }
        
        const originalQuantity = parseFloat(currentDetail.quantity) || 0
        const otherDetailsQuantity = this.preciseSubtract(this.getActualReceivedQuantity(), originalQuantity)
        const maxAllowedQuantity = this.preciseSubtract(this.lineInfo.quantityRecived, otherDetailsQuantity)
        
        if (inputQuantity > maxAllowedQuantity) {
          uni.showToast({
            title: `修改后的数量不能超过剩余可入库数量 ${maxAllowedQuantity}`,
            icon: 'none',
            duration: 3000
          })
          return
        }
      } else {
        // 新增时：使用原来的验证逻辑
        const pendingQuantity = this.getPendingQuantity()
        
        if (inputQuantity > pendingQuantity) {
          uni.showToast({
            title: `入库数量不能超过待入库数量 ${pendingQuantity}`,
            icon: 'none',
            duration: 3000
          })
          return
        }
      }
      
      // 验证仓库
      if (!this.recptForm.warehouseId) {
        uni.showToast({
          title: '请选择入库仓库',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({ title: '保存中...' })
      
      const apiCall = this.recptForm.detailId ? 
        updateItemreceptdetail(this.recptForm) : 
        addItemreceptdetail(this.recptForm)
      
      apiCall.then(response => {
        uni.showToast({
          title: this.recptForm.detailId ? '修改成功' : '添加成功',
          icon: 'success'
        })
        
        // 重新加载数据
        this.loadLineData().then(() => {
          this.closeRecptModal()
        })
        
      }).catch(error => {
        console.error('保存入库明细失败:', error)
        
        // 检查是否是业务错误（code=500）
        if (error === '500') {
          // 拦截器已经显示了具体的业务错误信息，这里不需要再显示
          console.log('业务错误，拦截器已显示toast')
        } else {
          // 真正的网络异常
          uni.showToast({ 
            title: '网络异常，请检查网络连接后重试', 
            icon: 'none',
            duration: 3000
          })
        }
      }).finally(() => {
        uni.hideLoading()
      })
    },
    
    // 编辑明细
    editDetail(detail) {
      // 直接使用 detail 中的信息，简化拷贝逻辑
      this.recptForm = { ...detail }
      
      // 先清空默认选择，确保触发 watch
      this.warehouseDefaultSelection = null
      
      this.$refs.recptModal.open()
      
      // 延迟设置仓库默认选择数据，确保弹窗和组件完全渲染
      this.$nextTick(() => {
        setTimeout(() => {
          this.warehouseDefaultSelection = {
            warehouseId: detail.warehouseId,
            warehouseCode: detail.warehouseCode,
            warehouseName: detail.warehouseName,
            locationId: detail.locationId,
            locationCode: detail.locationCode,
            locationName: detail.locationName,
            areaId: detail.areaId,
            areaCode: detail.areaCode,
            areaName: detail.areaName
          }
        }, 200)
      })
    },
    
    // 删除明细
    deleteDetail(detail) {
      // 验证明细数据
      if (!detail || !detail.detailId) {
        uni.showToast({
          title: '明细数据不完整',
          icon: 'none'
        })
        return
      }
      
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条入库明细吗？删除后无法恢复。',
        success: (res) => {
          if (res.confirm) {
            this.performDelete(detail.detailId)
          }
        }
      })
    },
    
    // 执行删除操作
    performDelete(detailId) {
      uni.showLoading({ title: '删除中...' })
      
      delItemreceptdetail(detailId).then(response => {
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
        
        // 重新加载数据
        this.loadLineData().then(() => {
          // 删除成功后不需要额外操作
        })
        
      }).catch(error => {
        console.error('删除入库明细失败:', error)
        
        // 检查是否是业务错误（code=500）
        if (error === '500') {
          // 拦截器已经显示了具体的业务错误信息，这里不需要再显示
          console.log('业务错误，拦截器已显示toast')
        } else {
          // 真正的网络异常
          uni.showToast({ 
            title: '网络异常，请检查网络连接后重试', 
            icon: 'none',
            duration: 3000
          })
        }
      }).finally(() => {
        uni.hideLoading()
      })
    },
    
    // 获取行状态文本
    getLineStatusText() {
      if (!this.lineInfo) return ''
      const plannedQuantity = this.lineInfo.quantityRecived || 0
      const actualQuantity = this.getActualReceivedQuantity()
      
      if (actualQuantity === 0) {
        return '待入库'
      } else if (actualQuantity < plannedQuantity) {
        return '部分入库'
      } else {
        return '完全入库'
      }
    },
    
    // 获取行状态样式
    getLineStatusClass() {
      if (!this.lineInfo) return ''
      const plannedQuantity = this.lineInfo.quantityRecived || 0
      const actualQuantity = this.getActualReceivedQuantity()
      
      if (actualQuantity === 0) {
        return 'line-status-pending'
      } else if (actualQuantity < plannedQuantity) {
        return 'line-status-partial'
      } else {
        return 'line-status-completed'
      }
    },
    
    // 获取实际入库数量（明细总和）
    getActualReceivedQuantity() {
      if (!this.recptDetails || !Array.isArray(this.recptDetails)) {
        return 0
      }
      return this.recptDetails.reduce((total, detail) => {
        return this.preciseAdd(total, parseFloat(detail.quantity) || 0)
      }, 0)
    },
    
    // 获取待入库数量
    getPendingQuantity() {
      if (!this.lineInfo) return 0
      const plannedQuantity = this.lineInfo.quantityRecived || 0
      const actualQuantity = this.getActualReceivedQuantity()
      return Math.max(0, this.preciseSubtract(plannedQuantity, actualQuantity))
    },
    
    // 获取进度百分比
    getProgressWidth() {
      if (!this.lineInfo) return 0
      const plannedQuantity = this.lineInfo.quantityRecived || 0
      const actualQuantity = this.getActualReceivedQuantity()
      if (plannedQuantity === 0) return 0
      return this.preciseMultiply(this.preciseDivide(actualQuantity, plannedQuantity), 100)
    }
  }
}
</script>

<style lang="scss" scoped>
.purchase-detail-container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.page-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.line-info-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .info-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .line-status {
    padding: 6rpx 12rpx;
    border-radius: 16rpx;
    font-size: 20rpx;
    
    &.line-status-pending {
      background: #fff3cd;
      color: #856404;
    }
    
    &.line-status-partial {
      background: #d1ecf1;
      color: #0c5460;
    }
    
    &.line-status-completed {
      background: #d4edda;
      color: #155724;
    }
  }
}

.info-content {
  .content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16rpx 20rpx;
    
    .grid-item {
      display: flex;
      flex-direction: column;
      
      .item-label {
        font-size: 22rpx;
        color: #666;
        margin-bottom: 6rpx;
      }
      
      .item-value {
        font-size: 24rpx;
        color: #333;
        font-weight: 500;
        word-break: break-all;
        line-height: 1.4;
      }
      
      &.full-width {
        grid-column: 1 / -1;
      }
      
      &.progress-item {
        grid-column: 1 / -1;
        
        .progress-info {
          display: flex;
          flex-direction: column;
          gap: 8rpx;
          
          .progress-bar {
            height: 8rpx;
            background: #e9ecef;
            border-radius: 4rpx;
            overflow: hidden;
            
            .progress-fill {
              height: 100%;
              background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
              border-radius: 4rpx;
              transition: width 0.3s ease;
            }
          }
          
          .progress-text {
            font-size: 22rpx;
            color: #28a745;
            font-weight: bold;
            text-align: center;
          }
        }
      }
    }
  }
}

.add-recpt-section {
  margin-bottom: 20rpx;
  
  .add-recpt-btn {
    width: 100%;
    height: 80rpx;
    background: linear-gradient(135deg, #fd7e14 0%, #ff922b 100%);
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
    font-size: 28rpx;
    color: #fff;
    border: none;
    
    &.disabled {
      background: #ccc;
      color: #999;
    }
    
    .btn-text {
      font-size: 28rpx;
    }
  }
}

.details-section {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .section-count {
    font-size: 24rpx;
    color: #666;
  }
}

.details-list {
  .detail-item {
    border: 1rpx solid #e8e8e8;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 16rpx;
    background: #fff;
    box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.05);
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      
      .item-title {
        display: flex;
        align-items: center;
        
        .item-number {
          font-size: 24rpx;
          color: #666;
          background: #f8f9fa;
          padding: 4rpx 12rpx;
          border-radius: 12rpx;
          font-weight: 500;
        }
      }
      
      .item-actions {
        display: flex;
        gap: 12rpx;
        
        .action-btn {
          height: 56rpx;
          padding: 0 20rpx;
          border-radius: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8rpx;
          font-size: 24rpx;
          border: none;
          min-width: 100rpx;
          transition: all 0.2s ease;
          
          &.edit-btn {
            background: #e3f2fd;
            color: #007AFF;
            border: 1rpx solid #bbdefb;
            
            &:active {
              background: #bbdefb;
              transform: scale(0.95);
            }
          }
          
          &.delete-btn {
            background: #ffebee;
            color: #ff4757;
            border: 1rpx solid #ffcdd2;
            
            &:active {
              background: #ffcdd2;
              transform: scale(0.95);
            }
          }
        }
      }
    }
    
    .item-content {
      .content-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6rpx 0;
        border-bottom: 1rpx solid #f8f9fa;
        
        &:last-child {
          border-bottom: none;
        }
        
        &.warehouse-info {
          background: #f8f9ff;
          margin: 0 -20rpx 8rpx;
          padding: 8rpx 20rpx;
          border-radius: 8rpx;
          border-bottom: 1rpx solid #e3f2fd;
          
          .row-label {
            color: #1976d2;
            font-weight: 600;
          }
          
          .row-value {
            color: #1976d2;
            font-weight: 600;
          }
        }
        
        .row-label {
          font-size: 24rpx;
          color: #666;
          flex-shrink: 0;
        }
        
        .row-value {
          font-size: 24rpx;
          color: #333;
          text-align: right;
          word-break: break-all;
        }
      }
    }
    
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-top: 20rpx;
  }
  
  .empty-desc {
    font-size: 24rpx;
    color: #ccc;
    margin-top: 10rpx;
  }
}

// 弹窗样式
.recpt-modal {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 85vh;
  box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.1);
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 30rpx 24rpx;
    border-bottom: 1rpx solid #f5f5f5;
    background: #fafafa;
    border-radius: 24rpx 24rpx 0 0;
    
    .modal-title {
      font-size: 34rpx;
      font-weight: 600;
      color: #1a1a1a;
    }
  }
  
  .modal-content {
    padding: 32rpx 30rpx;
    max-height: 65vh;
    overflow-y: auto;
    background: #fff;
    
    .form-row {
      display: flex;
      gap: 24rpx;
      margin-bottom: 32rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    .form-group {
      margin-bottom: 0;
      
      &.half-width {
        flex: 1;
      }
      
      &.full-width {
        width: 100%;
      }
      
      .form-label {
        display: block;
        font-size: 26rpx;
        color: #333;
        margin-bottom: 12rpx;
        font-weight: 500;
        
        .required {
          color: #ff4757;
          margin-left: 4rpx;
        }
      }
      
      .form-input {
        width: 100%;
        height: 72rpx;
        padding: 0 20rpx;
        border: 2rpx solid #e8e8e8;
        border-radius: 12rpx;
        font-size: 26rpx;
        background: #fff;
        transition: all 0.3s ease;
        
        &:focus {
          border-color: #007AFF;
          box-shadow: 0 0 0 6rpx rgba(0, 122, 255, 0.1);
        }
        
        &[readonly] {
          background: #f8f9fa;
          color: #666;
          cursor: pointer;
        }
        
        &::placeholder {
          color: #999;
          font-size: 24rpx;
        }
      }
      
      .input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        
        .form-input {
          flex: 1;
          padding-right: 80rpx;
        }
        
        .scan-btn {
          position: absolute;
          right: 8rpx;
          top: 50%;
          transform: translateY(-50%);
          width: 44rpx;
          height: 44rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 8rpx;
          transition: all 0.2s ease;
          
          &:active {
            transform: translateY(-50%) scale(0.95);
          }
        }
        
        .uni-icons {
          position: absolute;
          right: 20rpx;
          color: #999;
        }
      }
      
      .quantity-input {
        display: flex;
        align-items: center;
        border: 2rpx solid #e8e8e8;
        border-radius: 12rpx;
        overflow: hidden;
        background: #fff;
        transition: all 0.3s ease;
        
        &:focus-within {
          border-color: #007AFF;
          box-shadow: 0 0 0 6rpx rgba(0, 122, 255, 0.1);
        }
        
        .quantity-btn {
          width: 48rpx;
          height: 72rpx;
          border: none;
          background: #f8f9fa;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          color: #333;
          font-weight: 600;
          transition: all 0.2s ease;
          
          &:active {
            background: #e9ecef;
            transform: scale(0.95);
          }
        }
        
        .quantity-input-field {
          flex: 1;
          height: 72rpx;
          padding: 0 16rpx;
          border: none;
          text-align: center;
          font-size: 26rpx;
          background: #fff;
          font-weight: 500;
        }
      }
    }
  }
  
  .modal-footer {
    display: flex;
    gap: 24rpx;
    padding: 24rpx 30rpx 32rpx;
    border-top: 1rpx solid #f5f5f5;
    background: #fafafa;
    
    .modal-btn {
      flex: 1;
      height: 88rpx;
      border-radius: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      font-weight: 600;
      border: none;
      transition: all 0.3s ease;
      
      &.cancel-btn {
        background: #f8f9fa;
        color: #666;
        border: 2rpx solid #e8e8e8;
        
        &:active {
          background: #e9ecef;
          transform: scale(0.98);
        }
      }
      
      &.confirm-btn {
        background: linear-gradient(135deg, #fd7e14 0%, #ff922b 100%);
        color: #fff;
        box-shadow: 0 4rpx 16rpx rgba(253, 126, 20, 0.3);
        
        &:active {
          transform: scale(0.98);
          box-shadow: 0 2rpx 8rpx rgba(253, 126, 20, 0.4);
        }
        
        &:disabled {
          background: #ccc;
          color: #999;
          box-shadow: none;
          transform: none;
        }
      }
    }
  }
}
</style>
